<template>
  <div>
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar
        title="搜索结果"
        left-arrow
        @click-left="$router.go(-1)"
        fixed
      />
    </div>
      <!-- 下拉加载 -->
      <div class="container">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <!-- 文章内容 -->
          <article-item-vue
            v-for="item in list"
            :key="item.art_id"
            :artItem="item"
            :isShow="false"
            @click.native="toDetailPageFn(item.art_id)"
          ></article-item-vue>
        </van-list>
      </div>
  </div>
</template>

<script>
import ArticleItemVue from '@/components/ArticleItem.vue'
import { getSearch } from '@/api'
export default {
  name: 'SearchResult',
  components: {
    ArticleItemVue
  },
  data () {
    return {
      kw: this.$route.params.keywords, // 关键字
      page: 1,
      list: [], // 文章列表
      loading: false, // 上拉状态
      finished: false
    }
  },
  async created () {
    // 得到搜索文章
    const res = await getSearch({ kw: this.kw, page: this.page })
    this.list = res.data.data.results
  },
  methods: {
    // 上拉加载数据
    async onLoad () {
      const res = await getSearch({ kw: this.kw, page: ++this.page })
      // 判断是否还有数据
      if (res.data.data.results.length === 0) {
        this.finished = true // 没有更多数据了
        return
      }
      this.list.push(...res.data.data.results)
      this.loading = false
    },
    // 详细页
    toDetailPageFn (id) {
      this.$router.push(`/articleDetail?id=${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar{
  position: fixed;
}
.container {
    margin-top: 46px;
}
</style>
